<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Better-Scroll的基本使用</title>
</head>
<style>
  .content {

  }

  .wrapper {
    height: 200px;
    overflow: hidden;
    background-color: #00BB33;
  }
</style>
<body>

  <div class="wrapper">
    <ul class="content">
      <button>按钮</button>
    </ul>
  </div>
</body>
<script src="js/better-scroll.js"></script>
<script>
// document.querySelector('button').addEventListener('click', () => console.log('监听'));

const ul = document.querySelector('ul');

for (let i = 0; i < 100; i++) { // 测试数据
  const text = document.createTextNode('第' + (i + 1) + '个元素!');
  const li = document.createElement('li');
  li.appendChild(text);
  ul.appendChild(li);
}

// 默认BetterScroll 是不能监听位置的
// probeType 0,1 不侦测
// probeType 2 侦测操作, 不侦测惯性滚动
// probeType 3 侦测所有滚动
// const bs = new BScrollConstructor(document.querySelector('.wrapper'), {
// const bs = BetterScroll.createBScroll(document.querySelector('.wrapper'), {
const bs = BetterScroll.createBScroll('.wrapper', {
  probeType: 0,
  // click: false, // 是否监听插件内的事件
  pullUpLoad: true // 上拉加载更多, 会将 probeType 置为 3
});

bs.on('scroll', (position) => {
  console.log(position);
});

bs.on('pullingUp', () => {
  console.log('上拉加载更多');
  setTimeout(() => bs.finishPullUp(), 1000);
});
</script>
</html>